<template>
    <view class="system-set-page">
        <view class="tips">
            <text>注销提示</text>
            <text class="tips-text">一旦账号注销成功</text>
            <text class="tips-text">
                <text class="quan"></text>
                您的账号将无法登录与使用
            </text>
            <text class="tips-text">
                <text class="quan"></text>
                您的账号信息将会永久清除且无法恢复
            </text>
            <text class="tips-text">
                <text class="quan"></text>
                您的账号所关联的相关数据将无法查询与找回
            </text>
            <text class="tips-text">
                <text class="quan"></text>
                您所绑定的手机号码可以再次注册
            </text>
        </view>
        <view class="actions">
            <view @tap="showAlertPop" class="btn left">注销账号</view>
            <view @tap="goBack" class="btn right" :style="'background:' + acolor + ';'">取消</view>
        </view>
        <view class="alert-pop" v-if="alertPop.show">
            <view class="content-box animated" :class="animat" hoverClass="bounce">
                <view class="popview">
                    <text class="name">注销后，账号内所有资产均作废，且不可找回，请谨慎操作！</text>
                    <text class="miao">
                        请输入<text class="text-red">"确定注销"</text>继续
                    </text>
                    <text class="miao">
                        <text class="text-red">"下一步"</text>
                        注销操作
                    </text>
                    <input
                        class="popinput"
                        placeholder="请输入确认注销"
                        type="text"
                        v-model="textInput"
                    />
                    <view class="popbot">
                        <view @tap="doConfirm" class="popbotitem left" :style="'border:' + '0.5px solid' + acolor + ';' + 'color:' + acolor + ';'">下一步</view>
                        <view @tap="doCancel" class="popbotitem quxiao" :style="'background:' + acolor + ';'">取消</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      alertPop: {
        show: false
      },
      animat: 'fadeIn',
      textInput: '',
      acolor: '#5997FF'
    };
  },
  created(){},
  onShow(){},
  onReady(){},
  onLoad(n) {},
  mounted(){},
  onPageScroll(n) {},
  onHide(){},
  methods: {
    goBack() {
      uni.navigateBack();
    },
    showAlertPop() {
      this.alertPop.show = true;
    },
    doCancel() {
      this.alertPop.show = false;
      this.textInput = '';
    },
    doConfirm() {
      if (this.textInput !== '确定注销') {
        this.$util.message('输入有误，请重新输入', 'error')
        return
      }
      this.$util.request({
        url: '/user/destroy'
      }).then(res => {
        uni.removeStorage('token')
        this.$util.message(res.message, 'success', function () {
          uni.reLaunch({
            url: '/pages/index/index'
          });
        })
      })
    }
  }
};
</script>
<style scoped>
@import './destroy.css';
</style>
